<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		    学习主体：针对页面操作比较多  ---操作
			JQuery操作DOM:理解：JQ框架改变页面内容效果
			js基础就可以直接学习，了解函数使用
			基础函数---事件源之后出现，事件源语法糖中
			html( )   作用：增加一个元素，覆盖原有html
			val()     作用：针对input元素，实现修改文本框内容
			text()    作用：生成为本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus voluptates sit quisquam aut totam, possimus deleniti alias velit consectetur tempora minus, repellat quidem ipsa nisi quo, aliquam quas explicabo obcaecati.</p>
	<div style="width: 200px; height: 200px; background: #000;"></div>
	<h3>lorem</h3>
	<input type="button" value="按钮2" />
	<input type="text" />
	
	   <script>
	   	   $("button").click(function(){
			  
			  %("p").html("<h1>JQ操作DOM-html函数使用</h1>"); 
		   });
		   
		   $("div").mouseenter(function(){
			   $("h3").html("<h3>黄颜色</h3>")
			   
		   });
		   
		   $("input[type='button']").click(function(){
			  $("input[type='text']") 
			   
		   });
		   /*利用JQ操作DOM(页面效果)：1.元素内容操作（3个函数）
	                                  html()
																							
																							
																							
		                                    
		   
		   
		   
		   */
	   </script>
	</body>
</html>